<template>
	<view class="wrap">
		<view class="content">
			<view class="title">用户登录</view>
			<view class="form-item">
				<view class="label">用户名</view>
				<input v-model="form.username" type="text" class="input" placeholder="请输入用户名" />
			</view>
			<view class="form-item">
				<view class="label">密码</view>
				<input v-model="form.password" type="password" class="input" placeholder="请输入密码" />
			</view>
			<button @tap="login" class="login-btn">登录</button>
			<view class="register-text" @tap="toRegister">还没有账号，立即注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				}
			};
		},
		methods: {
			async login() {
				if (!this.form.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				let res = await uniCloud.callFunction({
					name: 'uni-id-cf',
					data: {
						action: 'login',
						params: this.form,
					}
				});
				if (res.result.code === 0) {
							this.$u.toast('登录成功');
							uni.navigateTo({ // 使用uni.navigateTo进行页面跳转  
								url: '/pages/index/index'
							});
						} else {
							this.$u.toast(res.result.msg);
						}
					},
					toRegister() {
						uni.navigateTo({
							url: '/pages/register/register' // 假设这是您的注册页面路径  
						});
					}
				}
	};
</script>

<style scoped>
	.wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.content {
		width: 80%;
		max-width: 400px;
		padding: 20px;
		background-color: #f7f7f7;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
		text-align: center;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.input {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 16px;
	}

	.login-btn {
		display: block;
		width: 100%;
		padding: 10px;
		margin-top: 20px;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		text-align: center;
		font-size: 16px;
	}

	.login-btn:hover {
		background-color: #0056b3;
	}

	.register-text {
		text-align: center;
		margin-top: 10px;
		cursor: pointer;
		color: #007bff;
	}

	.register-text:hover {
		text-decoration: underline;
	}
</style>